<template>
  <div>
    <x-header :left-options="{backText: ''}" style="background-color:#31b9b8;"><span>通讯录</span>
      <x-icon slot="right" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;"></x-icon>
    </x-header>
    <search placeholder="名称" @on-submit="onSubmit" :auto-fixed="autoFixed" @on-focus="onFocus"
            @on-cancel="onCancel"></search>

    <div>
      <tab :line-width=2 active-color='#31b9b8' v-model="index">
        <tab-item selected>班级</tab-item>
        <tab-item>室友</tab-item>
      </tab>
      <swiper v-model="index" height="500px" :show-dots="false">
        <swiper-item :key="index">
          <div class="tab-swiper vux-center">
            <group title="A">
              <cell title="阿里医生"></cell>
              <cell title="阿里医生"></cell>
              <cell title="阿里医生"></cell>
            </group>
            <group title="B">
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
              <cell title="白云"></cell>
            </group>
          </div>
        </swiper-item>
        <swiper-item :key="index">
          <div class="tab-swiper vux-center">
            <group title="A">
              <cell title="阿里医生2"></cell>
              <cell title="阿里医生2"></cell>
              <cell title="阿里医生2"></cell>
            </group>
            <group title="B">
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
              <cell title="白云2"></cell>
            </group>
          </div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>
<script>
  import {XHeader, Search, Group, Cell, XButton, Tab, TabItem, Swiper, SwiperItem} from 'vux'
  export default {
    components: {
      XHeader,
      Search,
      Group,
      Cell,
      XButton,
      Tab,
      TabItem,
      Swiper,
      SwiperItem
    },
    methods: {
      resultClick (item) {
        window.alert('you click the result item: ' + JSON.stringify(item))
      },
      getResult (val) {
        this.results = val ? getResult(this.value) : []
      },
      onSubmit (val) {
        window.alert('on submit' + val)
      },
      onCancel () {
        console.log('on cancel')
      },
      onFocus () {
        console.log('on focus')
      }
    },
    data () {
      return {
        results: [],
        autoFixed: false,
        value: '',
        value1: 'hello',
        index: 0
      }
    }
  }
  function getResult (val) {
    let rs = []
    for (let i = 0; i < 8; i++) {
      rs.push({
        title: `${val} result: ${i + 1} `,
        other: i
      })
    }
    return rs
  }
</script>
<style scoped>
  p {
    padding: 10px 15px;
    font-size: 14px;
    color: #888;
  }
</style>
